.container {
    position: fixed;
    bottom: 2.3rem;
    right: 0;
    z-index: 10;
    background: rgba(51, 51, 51, .8);
    border-bottom-left-radius: .5rem;
    border-top-left-radius: .5rem;
    padding: .16rem .34rem;
    font-size: .28rem;
    color: #ffffff;

    .notification {
        position: absolute;
        text-align: center;
        vertical-align: middle;
        top: .08rem;
        right: .12rem;
        background: #e01f0b;
        line-height: .3rem;
        font-size: .24rem;
        color: #ffffff;
        border-radius: 100%;
        padding: .06rem;
        height: .3rem;
        min-width: .3rem;
    }
}

.enter {
    transform: translateX(100%);

    &.enterActive {
        transform: translateX(0%);
        transition: transform .2s ease-in-out;
    }
}

.leave {
    transform: translateX(0%);

    &.leaveActive {
        transform: translateX(100%);
        transition: transform .2s ease-in-out;
    }
}

.icon {
    font-size: .46rem;
}

.pushContainer {
    position: fixed;
    top: 0;
    left: 50%;
    width: 7.5rem;
    transform: translateX(-50%);
    min-height: 1.4rem;
    background-color: #ffffff;
    border-radius: 0px 0px 10px 10px;
    box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
    z-index: 999;

    .head {
        padding:.13rem .2rem .1rem;
        background: #fafafa;
        font-size: .28rem;
        color: #333333;

        .iconContainer {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: .4rem;
            height: .4rem;
            background-color: #499BF7;
            margin-right: .2rem;

            &.system {
                background-color: #AB2212;
            }

            .pushIcon {
                font-size: .28rem;
                color: #ffffff;
            }

            .userIcon {
                background-position: center;
                background-size: cover;
                height: .4rem;
                width: .4rem;
            }
        }

        .title {
            max-width: 3.5rem;
            line-height: .4rem;
            height: .4rem;

            &.name {
                word-break: break-all;
                display: -webkit-inline-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
                vertical-align: top;
            }
        }

        .time {
            float: right;
        }
    }

    .content {
        font-size:0.3rem;
        line-height: 0.32rem;
        height: 0.32rem;
        color: #333333;
        margin: .22rem .2rem;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }
}

.pushEnter {
    top: -100%;
    &.pushEnterActive {
        top: 0;
        transition: top .2s ease-in-out;
    }
}

.pushLeave {
    top: 0;
    &.pushLeaveActive {
        top: -100%;
        transition: top .2s ease-in-out;
    }
}
